import React from 'react';
import styles from './styles.styl';
import util from '../../../util'
import cx from 'classnames'
import {Button,IconButton} from 'sq-ui';
import { Modal, error, success, Input, MulSelect } from '../../../ui-components';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux'
import { verifyPassword } from '../../../actions/auth.action'
import * as okrActions from '../../../actions/okr.action'
import { clearAtList, fetchAtList } from '../../../actions/home.action'
import InvitedItem from '../../review/new/self/InvitedItem';

@connect(({ app }) => ({ app }),dispatch => ({actions: bindActionCreators({clearAtList, fetchAtList, verifyPassword,...okrActions}, dispatch)}))
class ProjectTeamItem extends React.Component {
  constructor(props) {
    super(props);
    this.displayName = 'ProjectTeamItem';
    this.state={
      deleteShow: false,
      deletePassword: '',
      deleteMsg: '',
      menmberSelect: '',
    }
  }
  cancelReviewActivity = () => {
    const {
      item
    } = this.props;
    this.props.actions.verifyPassword(this.state.deletePassword,(d) =>{
      if(!d.data) {
        this.setState({
          deleteMsg: '密码错误',
        });
        return;
      }
      this.props.actions.deleteProjectTeam(item.teamId, item.projectTeamId, () => {
        success('删除成功')
        this.setState({
          deleteShow: false
        })
      })
    });
    
  }
  componentDidMount() {
    const {
      item
    } = this.props;
    this.props.actions.fetchProjectTeamMember(item.teamId, item.projectTeamId);
  }
  handleDelete = () => {
    this.setState({
      deleteShow: true,
    });
    
  }
  handleUpdate = () => {
    const {
      item
    } = this.props;
    this.props.handleUpdate && this.props.handleUpdate(true, item.projectTeamId, item.projectTeamName);
  }
  handleSelect = (list) => {
    const v = list.pop();
    const {
      item
    } = this.props;
    this.props.actions.addProjectTeamMember(item.teamId, item.projectTeamId,[{idValue: v.userId}], () => {
      this.props.actions.fetchProjectTeamMember(item.teamId, item.projectTeamId);
      success('添加成员成功');
    })
  }
  onRemove = (user) => {
    const {
      item
    } = this.props;
    this.props.actions.deleteProjectTeamMember(item.teamId, item.projectTeamId, user.invitedUserProfile.userId, () => {
      this.props.actions.fetchProjectTeamMember(item.teamId, item.projectTeamId);
    })
  }
  render() {
    const {
      item
    } = this.props;
    const {
      members = []
    } = item;
    const { atList } = this.props.app;
    return (

      <div className={styles['item']} >
        <div className={styles['item-title']}><span className={styles['item-span']}>{item.projectTeamName} </span>
          <span className={styles['item-icon']}>
          <IconButton
            style={{ cursor: 'pointer',padding: '4px 4px 0' }}
            size="16"
            icon="edit"
            onClick={this.handleUpdate}
          />
          <IconButton
            style={{ cursor: 'pointer',padding: '4px 4px 0' }}
            size="16"
            icon="delete"
            onClick={this.handleDelete}
          />
          </span>
        </div>
         <div className={styles['invited-search']}>
          <MulSelect 
            placeholder="搜索同事并添加"
            width={'430px'}
            value={[...this.state.menmberSelect]}
            fetch={value => {
              if (value)
                this.props.actions.fetchAtList({
                  keyword: value,
                  type: 2
                });
              else
                this.props.actions.clearAtList();
            }}
            getItemAttrs={(item) => {
              return {
                label: item.fullName,
                img: item.avatarUrl,
              }
            }}
            onSelect={this.handleSelect}
            options={atList}
            excludeList={members}
          />  
        </div>
        {
          members.map((v, i) => {
            return <InvitedItem isProjectTeam item={{invitedUserProfile:v,status: 3}} key={i} onRemove={this.onRemove}/>
          })
        }
        <Modal
          title={`确认删除项目组【${item.projectTeamName}】`}
          onRequestClose={() => this.setState({ deleteShow: false })}
          active={this.state.deleteShow}
        >
          <div className={styles['delete-area']}>
            <p>删除当前项目组，将同时删除该项目组所有目标周期的所有目标、关键结果、批注和更新记录。<span>此操作不可逆</span></p>
            <p>如确定要删除，请输入登录密码，并点击下方按钮：</p>
            <input type="password" value={this.state.deletePassword} onChange={(e)=>this.setState({deletePassword:e.target.value, deleteMsg:''})}/>
            <div className={styles['delete-msg']}>{this.state.deleteMsg}</div>
            <Button style={{ width: '100%', marginTop: '10px',height:'36px' }} disabled={!this.state.deletePassword} blue  label="删除项目组" onClick={::this.cancelReviewActivity} />
          </div>
        </Modal> 
      </div>
    );
  }
}

export default ProjectTeamItem;
